<%@ page import="java.sql.*, java.text.SimpleDateFormat" %>
<%@ page import="bean.DB" %>
<%@ page contentType="text/html;charset=UTF-8" pageEncoding="utf-8" %>

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人主页</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
            margin: 0;
            padding: 0;
        }

        .container {
            width: 80%;
            margin: 50px auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .header {
            text-align: center;
            margin-bottom: 20px;
        }

        .header img {
            border-radius: 50%;
            width: 120px;
            height: 120px;
            object-fit: cover;
        }

        .profile-card {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
            flex-wrap: wrap;
            gap: 20px;
        }

        .profile-card div {
            background-color: #f9f9f9;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            width: 300px;
            text-align: center;
        }

        .profile-card h3 {
            margin-bottom: 10px;
            font-size: 18px;
            color: #333;
        }

        .profile-card p {
            font-size: 16px;
            color: #666;
            margin: 5px 0;
        }

        .btn {
            background-color: #4CAF50;
            color: white;
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            text-align: center;
            display: inline-block;
            margin-top: 10px;
        }

        .btn:hover {
            background-color: #45a049;
        }

        .modify-form {
            margin-top: 20px;
            display: none;
        }

        .modify-form input[type="file"], .modify-form input[type="text"] {
            padding: 8px;
            margin: 10px 0;
            width: 100%;
            border-radius: 4px;
            border: 1px solid #ddd;
        }

        .modify-form button {
            padding: 8px 16px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .modify-form button:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>

<%
    // 获取当前用户ID
    String userIdStr = (String) session.getAttribute("userId");
    if (userIdStr == null) {
        response.sendRedirect("login.jsp");
        return;
    }

    // 将 userIdStr 转换为 Integer
    int userId;
    try {
        userId = Integer.parseInt(userIdStr);
    } catch (NumberFormatException e) {
        response.sendRedirect("login.jsp");
        return;
    }

    // 创建数据库连接
    DB db = new DB();
    String query = "SELECT id, username, origin, gender, birthday, user_avatar, address, user_star, adminKey FROM users WHERE id = ?";
    ResultSet rs = null;
    try (Connection conn = db.createConn(); PreparedStatement pstmt = conn.prepareStatement(query)) {
        pstmt.setInt(1, userId); // 设置查询参数为用户ID
        rs = pstmt.executeQuery();

        if (!rs.next()) {
            // 如果没有数据，返回错误或跳转到其他页面
            response.sendRedirect("errorPage.jsp");
            return;
        }

        // 时间格式化器
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
%>

<div class="container">

    <div class="header">
        <h2>欢迎来到个人主页</h2>
        <img src="<%= rs.getString("user_avatar") != null ? rs.getString("user_avatar") : "default-avatar.jpg" %>" alt="用户头像">
        <p><strong><%= rs.getString("username") %></strong></p>
    </div>

    <div class="profile-card">
        <div>
            <h3>基本信息</h3>
            <p><strong>用户名：</strong><%= rs.getString("username") %></p>
            <p><strong>性别：</strong><%= rs.getString("gender") %></p>
            <p><strong>生日：</strong><%= sdf.format(rs.getDate("birthday")) %></p>
        </div>

        <div>
            <h3>联系方式</h3>
            <p><strong>地址：</strong><%= rs.getString("address") %></p>
            <p><strong>户籍：</strong><%= rs.getString("origin") %></p>
        </div>

        <div>
            <h3>其他信息</h3>
            <p><strong>积分：</strong><%= rs.getDouble("user_star") %></p>
            <p><strong>管理员密钥：</strong><%= rs.getString("adminKey") == null ? "无" : rs.getString("adminKey") %></p>
        </div>
    </div>

    <!-- 修改头像表单 -->
    <div id="avatarForm" class="modify-form">
        <h3>修改头像</h3>
        <form action="./updateProfileServlet" method="post" enctype="multipart/form-data">
            <input type="file" name="newAvatar">
            <button type="submit">上传头像</button>
        </form>
    </div>

    <!-- 修改基本信息表单 -->
    <div id="userinfoForm" class="modify-form">
        <h3>修改基本信息</h3>
        <form action="./updateBasicInfoServlet" method="post">
            <input type="text" name="username" value="<%= rs.getString("username") %>" required>
            <input type="text" name="gender" value="<%= rs.getString("gender") %>" required>
            <input type="text" name="birthday" value="<%= sdf.format(rs.getDate("birthday")) %>" required>
            <button type="submit">保存</button>
        </form>
    </div>

    <!-- 修改联系方式表单 -->
    <div id="addressForm" class="modify-form">
        <h3>修改联系方式</h3>
        <form action="./upAddressServlet" method="post">
            <input type="text" name="address" value="<%= rs.getString("address") %>" required>
            <input type="text" name="origin" value="<%= rs.getString("origin") %>" required>
            <button type="submit">保存</button>
        </form>
    </div>

    <button class="btn" onclick="toggleModifyForm('avatarForm')">修改头像</button>
    <button class="btn" onclick="toggleModifyForm('userinfoForm')">修改基本信息</button>
    <button class="btn" onclick="toggleModifyForm('addressForm')">修改联系方式</button>
    <form>
        <button class="btn" type="button" onclick="goToAnotherPage()">返回</button>
    </form>

</div>

<%
    } catch (SQLException e) {
        e.printStackTrace();
    } finally {
        // 确保关闭资源
        if (rs != null) {
            try {
                rs.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
    }
%>

<script>
    function toggleModifyForm(formId) {
        var form = document.getElementById(formId);
        form.style.display = form.style.display === 'none' ? 'block' : 'none';
    }
    function goToAnotherPage() {
        // 修改这里的地址为你实际要跳转的页面地址
        window.location.href = "userinfo.jsp";
    }
</script>

</body>
</html>
